@use '@angular/material' as mat;
@import '../../theme/mixins/amixin';

@mixin header-color($theme) {
  $config: mat.m2-get-color-config($theme);
  $foreground: map-get($config, foreground);
  $background: map-get($config, background);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);

  $primary-contrast: mat.m2-get-color-from-palette($primary, default-contrast);
  $second: mat.m2-get-color-from-palette($foreground, 'secondary-text');
  $bg-card-color: mat.m2-get-color-from-palette($background, card);

  .header-top {
    background-color: mat.m2-get-color-from-palette(
      $background,
      status-bar,
      0.75
    );
    @include mat.elevation(
      1,
      mat.m2-get-color-from-palette($background, tooltip),
      0.4
    );
    color: $second;
    .inv-icon {
      &.style-v1 {
        color: $second;
        .soc-name {
          background: mat.m2-get-color-from-palette($primary);
          color: $primary-contrast;
          &:after,
          &:before {
            background: mat.m2-get-color-from-palette($primary);
            color: $primary-contrast;
          }
        }
        .soc-icon-bg {
          background: rgba(0, 0, 0, 0.15);
        }
        .mat-icon {
          color: $second;
        }
        &:hover {
          color: $primary-contrast;
          .mat-icon {
            color: $primary-contrast;
          }
        }
      }
    }
    .right {
      .link {
        a {
          color: $second;
          &:hover {
            color: mat.m2-get-color-from-palette($primary);
          }
        }
      }
    }
  }
  .static {
    background-color: $bg-card-color;
    .header-banner {
      background-color: mat.m2-get-color-from-palette($background, status-bar);
    }
  }
  .header {
    border-top: 1px solid mat.m2-get-color-from-palette($foreground, divider);
    background-color: mat.m2-get-color-from-palette($background, app-bar);
    @include mat.elevation(
      2,
      mat.m2-get-color-from-palette($background, tooltip),
      0.25
    );
    .logo {
      color: mat.m2-get-color-from-palette($primary);
    }
    .main-menu {
      .item {
        a {
          color: mat.m2-get-color-from-palette($foreground, text, 0.75);

          &:hover,
          &:focus,
          &.active {
            color: mat.m2-get-color-from-palette($primary);
          }
          &.active {
            &:after {
              background-color: mat.m2-get-color-from-palette($primary);
            }
          }
        }
      }
      .mega-menu {
        background-color: $bg-card-color;
        @include mat.elevation(
          3,
          mat.m2-get-color-from-palette($foreground, divider, 0.7)
        );
        @include scrollbar(
          mat.m2-get-color-from-palette($foreground, divider, 0.2)
        );
      }
    }

    .actions {
      a {
        color: $primary-contrast;
      }
    }
  }

  .hover-menu {
    background-color: mat.m2-get-color-from-palette($background, card);
    @include mat.elevation(
      3,
      mat.m2-get-color-from-palette($foreground, divider, 0.7)
    );
    .child {
      background-color: mat.m2-get-color-from-palette($background, card);
      @include mat.elevation(
        3,
        mat.m2-get-color-from-palette($foreground, divider, 0.7)
      );
    }

    .sub-menu {
      .has-child {
        &:after {
          color: mat.m2-get-color-from-palette($foreground, divider);
        }
      }
    }
  }

  // user dropdown menu
  .user {
    .name {
      color: $primary-contrast;
    }
  }

  .transparent-mode {
    background-color: transparent;
    .static,
    .header-top,
    .header {
      background-color: transparent;
      box-shadow: none;
    }
    &.header-sticky {
      background: $bg-card-color;
      @include mat.elevation(
        2,
        mat.m2-get-color-from-palette($background, tooltip),
        0.25
      );
    }
    &.light {
      .header,
      .header-top,
      .header a,
      .header-top .inv-icon.style-v1,
      .header-top .inv-icon.style-v1 .mat-icon,
      .header-top .right a {
        color: $primary-contrast !important;
        transition: color 0.2s ease-in;
      }
      .github-star {
        .right {
          background-color: transparent;
        }
      }
      .search-box .mat-icon {
        color: mat.m2-get-color-from-palette($primary);
      }
      .has-icon {
        .mat-icon {
          color: mat.m2-get-color-from-palette($primary, default-contrast);
        }
      }
      .header {
        .main-menu {
          .item {
            a {
              &.active {
                &:after {
                  background-color: $primary-contrast !important;
                }
              }
            }
            .sub-menu {
              color: mat.m2-get-color-from-palette(
                $foreground,
                text,
                0.75
              ) !important;
              a {
                color: mat.m2-get-color-from-palette(
                  $foreground,
                  text,
                  0.75
                ) !important;
              }
            }
          }
        }
      }
    }
  }

  // sub menu
  .mat-mdc-menu-panel {
    .mat-mdc-menu-item {
      min-width: 180px;
    }
    &.sub-menu {
      a {
        color: mat.m2-get-color-from-palette($foreground, text, 0.75);
        &:hover,
        &:focus,
        &.active {
          color: mat.m2-get-color-from-palette($primary) !important;
        }
      }
    }
  }

  .search-box {
    form {
      border: 1px solid mat.m2-get-color-from-palette($foreground, divider);
    }
    input[type='search'] {
      color: mat.m2-get-color-from-palette($foreground, text);
      caret-color: mat.m2-get-color-from-palette($foreground, text, 0.5);
      background-color: $bg-card-color;
    }
    .mat-icon {
      color: mat.m2-get-color-from-palette($primary);
    }
  }

  .has-icon {
    .mat-icon {
      color: mat.m2-get-color-from-palette($primary);
    }
  }
  .header-inverse {
    .header {
      background-color: mat.m2-get-color-from-palette($primary);
      .site-name {
        color: $primary-contrast;
      }
      .main-menu {
        .item {
          .top {
            a {
              color: $primary-contrast;

              &:hover,
              &:focus {
                color: $primary-contrast;
              }
              &.active {
                color: mat.m2-get-color-from-palette($primary);
                background-color: $primary-contrast;
                &:after {
                  display: none;
                }
              }
            }
          }
        }
      }
      .switch-theme {
        .mat-icon {
          color: $primary-contrast;
        }
      }
    }
  }
}
